
import React           			from 'react';
import { Link } 				from 'react-router-dom';
import {inject, observer }      from 'mobx-react';

import TableList 				from 'component/table-list/index.jsx';
import Search 				    from 'component/search/index.jsx';

import './index.css'

@inject('store')
@observer
class Todo extends React.Component{
	// 构造函数
	constructor(props){
		super(props);
	}


	render(){
		let newListHeads = [
			{name : '序号'	  ,  width : '10%'},
			{name : '内容'    ,  width : '35%'},
			{name : '创建时间',  width : '15%'},
			{name : '完成时间',  width : '15%'},
			{name : '状态'    ,  width : '10%'},
			{name : '操作'    ,  width : '15%'}
		];
		let newListBody = this.props.store.unFinishedList.map((item, index) =>{
			let result = [{type : 'id'   , data : item.content.id     },
						 {type : 'info'  , data : item.content.data    , edit : true  },
						 {type : 'info'  , data : item.content.ctime   , edit : false },
						 {type : 'info'  , data : item.content.dtime   , edit : false },
						 {type : 'info'  , data : item.content.status  , edit : false },
						 {type : 'opear' , data : ['finish','delete']  , edit : false }
						];
			return result;
		});
		return(
				<div className="todo">
					<div className="todo-top">
						<label className="text-info items">TODO</label>
						<Search />
						<div className="tips">
							<span className="label label-info">Total:{this.props.store.getTotal}</span>
							<span className="label label-info">Finish:{this.props.store.getFinish}</span>
							<span className="label label-info">Left:{this.props.store.getLeft}</span>
						</div>
					</div>
					{/* Table 组件 */}
					<TableList tableHeads={newListHeads} tableBodys={newListBody} />
				</div>
		);
	}
}

export default Todo;
